<template>
  <div>
    <div class="box-img"><img src="../../assets/images/us1.jpg" alt="" /></div>
    <div class="bj">
      <!-- 标题组件 -->
      <xtltie :xtitle="xtitle"></xtltie>
      <div class="box">
        <ul>
          <li>
            <img src="../../assets/images/tianmao.jpg" alt="" />
            <p>天猫旗舰店</p>
            <button>点击进入</button>
          </li>
          <li>
            <img src="../../assets/images/jidong.jpg" alt="" />
            <p>京东旗舰店</p>
            <button>点击进入</button>
          </li>
          <li>
            <img src="../../assets/images/suning.jpg" alt="" />
            <p>苏宁旗舰店</p>
            <button>点击进入</button>
          </li>
          <li>
            <img src="../../assets/images/weixin.jpg" alt="" />
            <p>微信旗舰店</p>
            <button>点击进入</button>
          </li>
        </ul>
      </div>
      <!-- 底部导航 -->
      <bottom-nav></bottom-nav>
    </div>
  </div>
</template>

<script>
import bottomNav from "../../components/bottomNav.vue";
//导入标题组件
import Xtltie from "../../components/Xtltie.vue";
export default {
  name: "Mall",
  //注册组件
  components: {
    Xtltie,
    bottomNav,
  },
  data() {
    return {
      xtitle: {
        name: "官方商城",
        nameEnglish: "Official Mall",
      },
    };
  },
};
</script>

<style lang="less" scoped>
@media screen and (min-width: 1029px) {
  .box-img {
    position: relative;
    margin-bottom: 80px;
    img {
      width: 100%;
    }
  }
  .bj {
    width: 100%;
    // height: 1590px;
    height: auto;
    padding-bottom: 6%;
    position: relative;
    background: url("../../assets/images/bbjj_02.jpg") center no-repeat;
    background-size: 100% 100%;
    .box {
      width: 75%;
      margin: auto;
      margin-bottom: 40%;
      ul {
        padding-top: 150px;
        margin: auto;
        display: flex;
        li {
          margin-left: 56px;
          img {
            width: 100%;
          }
          img:hover {
            transform: scale(1.3);
          }
          button {
            width: 85px;
            height: 30px;
            border-radius: 30px;
            color: #ffffff;
            background-color: #e01e15;
          }
        }
      }
    }
  }
}
@media only screen and (min-width: 750px) and (max-width: 1028px) {
  .box-img {
    position: relative;
    margin-bottom: 80px;
    img {
      width: 100%;
    }
  }
  .bj {
    width: 100%;
    // height: 1590px;
    height: auto;
    padding-bottom: 6%;
    position: relative;
    background: url("../../assets/images/bbjj_02.jpg") center no-repeat;
    background-size: 100% 100%;
    .box {
      width: 75%;
      margin: auto;
      margin-bottom: 40%;
      ul {
        padding-top: 150px;
        margin: auto;
        display: flex;
        li {
          width: 23%;
          margin-left: 10px;
          img {
            width: 100%;
          }
          img:hover {
            transform: scale(1.3);
          }
          button {
            width: 85px;
            height: 30px;
            border-radius: 30px;
            color: #ffffff;
            background-color: #e01e15;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 749px) {
  .box-img {
    position: relative;
    margin-bottom: 10px;
    img {
      width: 100%;
    }
  }
  .bj {
    width: 100%;
    // height: 1590px;
    height: auto;
    padding-bottom: 6%;
    position: relative;
    background: url("../../assets/images/bbjj_02.jpg") center no-repeat;
    background-size: 100% 100%;
    .box {
      width: 75%;
      margin: auto;
      margin-bottom: 63%;
      ul {
        padding-top: 50px;
        margin: auto;
        display: flex;
        li {
          width: 23%;
          margin-left: 10px;
          img {
            width: 100%;
          }
          img:hover {
            transform: scale(1.3);
          }
          button {
            width: 100%;
            height: 30px;
            font-size: 12px;
            border-radius: 30px;
            color: #ffffff;
            background-color: #e01e15;
          }
        }
      }
    }
  }
}
</style>